<template>
  <div class='container'>
    <div class='core'>
      <van-form @submit="login" v-if='showLogin'>
        <van-cell-group inset>
          <van-field
            v-model.trim="loginParams.phone"
            name="phone"
            label="用户手机号"
            placeholder="用户手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <van-field
            v-model.trim="loginParams.password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
          <div style='height: 10px;'></div>
          <van-button round block @click='toRegister'>
            注册
          </van-button>
        </div>
      </van-form>
      <van-form @submit="register" v-else>
        <van-cell-group inset>
          <van-field
            v-model.trim="username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model.trim="registerParams.password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            v-model.trim="registerParams.phone"
            name="phone"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' },
            { pattern:/^1[3456789]\d{9}$/, message: '手机号不正确'}]"
          />
          <van-field
            v-model.trim="registerParams.code"
            name="code"
            label="验证码"
            placeholder="验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          />
          <van-button @click='getCode' round size='small' class='getCode'>获取验证码</van-button>
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
          <div style='height: 10px;'></div>
          <van-button round block @click='showLogin = true'>
            返回
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { reqCode, reqRegister } from '@/api/user.ts'
import { showFailToast, showSuccessToast } from 'vant'
import { useUserStore } from '@/store/user.ts'
import { ReqLoginParams } from '@/types/user'
import { useRouter } from 'vue-router'
const userStore = useUserStore()

const router = useRouter()

// 控制展示登录还是注册
const showLogin = ref<boolean>(true)

// 请求登陆的参数
const loginParams = ref<ReqLoginParams>({
  phone: '',
  password: '',
})

const username = ref<string>('')

// 请求注册的参数
const registerParams = ref({
  phone: '',
  password: '',
  code: ''
})

// 点击登录
const login = async () => {
  const res = await userStore.login(loginParams.value)
  if(res){
    showSuccessToast('登陆成功')
    // 跳转页面
    router.push('/my')
  }
}

// 切换注册页面
const toRegister = () => {
  showLogin.value = false
}

// 请求注册
const register = async () => {
  console.log(registerParams.value)
  const res = await reqRegister(registerParams.value)
  if(res.code === 200){
    showSuccessToast('注册成功，请登录')
    // 注册成功，切换登录页
    showLogin.value = true
  }
}

// 获取验证码，使用正则验证手机号
const getCode = async () => {
  if(/^1[3456789]\d{9}$/.test(registerParams.value.phone)){
    const res = await reqCode(registerParams.value.phone)
    if(res.code === 200){
      registerParams.value.code = res.data
    }
  } else {
    showFailToast('请输入正确的手机号')
  }
}

</script>

<script lang="ts">
export default {
  name: 'MyLogin'
}
</script>

<style scoped lang='less'>
.container{
  height: 100%;
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;

  background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;

  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }


  .core{
    position: absolute;
    bottom: 30%;
    margin: 0 auto;
  }

  .getCode{
    position: relative;
    left: 100px;
    margin-bottom: 5px;
  }
}
</style>
